import React, { forwardRef, useMemo } from 'react';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import './index.scss';

echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer]);

export interface FireEquipmentItem {
  icon: string;
  label: string;
  value: number;
}

export interface EquipmentTableRow {
  key: string;
  name: string;
  count: number;
  status: string;
}

export interface SpecialEquipmentItem {
  icon: string;
  label: string;
  value: number;
  hasBackground?: boolean;
}

export interface StationEquipmentSummaryProps {
  /**
   * 组件标题
   */
  title?: string;
  
  /**
   * 英文标题
   */
  englishTitle?: string;
  
  /**
   * 消防设备数据
   */
  fireEquipment?: FireEquipmentItem[];
  
  /**
   * 设备表格数据
   */
  equipmentTable?: EquipmentTableRow[];
  
  /**
   * 微型气象站数量
   */
  weatherStationCount?: number;
  
  /**
   * 气象设备饼图数据
   */
  weatherPieData?: Array<{name: string; value: number}>;
  
  /**
   * 特种设备数据
   */
  specialEquipment?: SpecialEquipmentItem[];
  
  /**
   * 点击事件
   */
  onClick?: () => void;
  
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  
  /**
   * 自定义类名
   */
  className?: string;
  
  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const StationEquipmentSummary = forwardRef<HTMLDivElement, StationEquipmentSummaryProps>((props, ref) => {
  const {
    title = '站体设备汇总',
    englishTitle = 'Station equipment integration',
    fireEquipment = [
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/01(1).png', label: '微型消防站', value: 21 },
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/02.png', label: '消防车', value: 21 }
    ],
    equipmentTable = [
      { key: '1', name: '推车式干煤灭火器', count: 5, status: '0' },
      { key: '2', name: '紧急报警器', count: 7, status: '0' }
    ],
    weatherStationCount = 21,
    weatherPieData = [
      { name: '温湿度监控仪', value: 30 },
      { name: '微型空气质量站', value: 25 },
      { name: '气象微站', value: 25 },
      { name: '路面状况监测仪', value: 20 }
    ],
    specialEquipment = [
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/编组33.png', label: '电梯', value: 40, hasBackground: true },
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/编组34.png', label: '锅炉', value: 4, hasBackground: true }
    ],
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const componentClassName = [
    'hzdz-station-equipment-summary',
    className
  ].filter(Boolean).join(' ');

  // 饼图配置
  const pieOption = useMemo(() => {
    const colors = ['#00D4FF', '#58FFF6', '#FFA726', '#FF6B6B'];
    
    return {
      backgroundColor: 'transparent',
      color: colors,
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#58FFF6',
        textStyle: {
          color: '#FFFFFF'
        },
        formatter: '{b}: {c} ({d}%)'
      },
      series: [
        {
          type: 'pie',
          radius: ['35%', '55%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          labelLine: {
            show: false
          },
          data: weatherPieData
        }
      ]
    };
  }, [weatherPieData]);

  return (
    <div
      ref={ref}
      className={componentClassName}
      style={style}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 顶部标题栏 */}
      <div className="hzdz-station-equipment-summary__header">
        <div className="hzdz-station-equipment-summary__header-content">
          <div className="hzdz-station-equipment-summary__title">{title}</div>
          <div className="hzdz-station-equipment-summary__english-title">{englishTitle}</div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="hzdz-station-equipment-summary__content">
        {/* 消防设备section */}
        <div className="hzdz-station-equipment-summary__section">
          <div className="hzdz-station-equipment-summary__section-header">
            <div className="hzdz-station-equipment-summary__section-dot"></div>
            <span className="hzdz-station-equipment-summary__section-title">消防设备</span>
            <div className="hzdz-station-equipment-summary__section-line"></div>
            <div className="hzdz-station-equipment-summary__section-arrow"></div>
          </div>
          
          <div className="hzdz-station-equipment-summary__fire-equipment">
            {fireEquipment.map((item, index) => (
              <div key={index} className="hzdz-station-equipment-summary__fire-item">
                <div className="hzdz-station-equipment-summary__fire-icon">
                  <img src={item.icon} alt={item.label} />
                </div>
                <div className="hzdz-station-equipment-summary__fire-info">
                  <div className="hzdz-station-equipment-summary__fire-label">{item.label}</div>
                  <div className="hzdz-station-equipment-summary__fire-value">{item.value}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 设备表格 */}
        <div className="hzdz-station-equipment-summary__table">
          <div className="hzdz-station-equipment-summary__table-header">
            <div className="hzdz-station-equipment-summary__table-cell">设备名称</div>
            <div className="hzdz-station-equipment-summary__table-cell">数量</div>
            <div className="hzdz-station-equipment-summary__table-cell">故障/过期</div>
          </div>
          <div className="hzdz-station-equipment-summary__table-body">
            {equipmentTable.map((row) => (
              <div key={row.key} className="hzdz-station-equipment-summary__table-row">
                <div className="hzdz-station-equipment-summary__table-cell">{row.name}</div>
                <div className="hzdz-station-equipment-summary__table-cell">{row.count}</div>
                <div className="hzdz-station-equipment-summary__table-cell">{row.status}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 气象设备和特种设备section */}
        <div className="hzdz-station-equipment-summary__bottom-sections">
          {/* 气象设备 */}
          <div className="hzdz-station-equipment-summary__weather-section">
            <div className="hzdz-station-equipment-summary__section-header hzdz-station-equipment-summary__section-header--small">
              <div className="hzdz-station-equipment-summary__section-dot hzdz-station-equipment-summary__section-dot--small"></div>
              <span className="hzdz-station-equipment-summary__section-title">气象设备</span>
              <div className="hzdz-station-equipment-summary__section-line hzdz-station-equipment-summary__section-line--small"></div>
              <div className="hzdz-station-equipment-summary__section-arrow"></div>
            </div>
            
            <div className="hzdz-station-equipment-summary__weather-content">
              <div className="hzdz-station-equipment-summary__weather-stat">
                <span className="hzdz-station-equipment-summary__weather-label">微型气象站</span>
                <span className="hzdz-station-equipment-summary__weather-value">{weatherStationCount}</span>
              </div>
              
              <div className="hzdz-station-equipment-summary__weather-chart">
                <ReactEChartsCore
                  echarts={echarts}
                  option={pieOption}
                  style={{ width: '120px', height: '120px' }}
                />
              </div>
              
              <div className="hzdz-station-equipment-summary__weather-legend">
                {weatherPieData.map((item, index) => (
                  <div key={index} className="hzdz-station-equipment-summary__legend-item">
                    <span className={`hzdz-station-equipment-summary__legend-dot hzdz-station-equipment-summary__legend-dot--${index}`}></span>
                    <span className="hzdz-station-equipment-summary__legend-text">{item.name}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 特种设备 */}
          <div className="hzdz-station-equipment-summary__special-section">
            <div className="hzdz-station-equipment-summary__section-header hzdz-station-equipment-summary__section-header--small">
              <div className="hzdz-station-equipment-summary__section-dot hzdz-station-equipment-summary__section-dot--small"></div>
              <span className="hzdz-station-equipment-summary__section-title">特种设备</span>
              <div className="hzdz-station-equipment-summary__section-line hzdz-station-equipment-summary__section-line--small"></div>
              <div className="hzdz-station-equipment-summary__section-arrow"></div>
            </div>
            
            <div className="hzdz-station-equipment-summary__special-content">
              {specialEquipment.map((item, index) => (
                <div key={index} className="hzdz-station-equipment-summary__special-item">
                  <div className="hzdz-station-equipment-summary__special-icon">
                    <img src={item.icon} alt={item.label} />
                  </div>
                  <span className="hzdz-station-equipment-summary__special-label">{item.label}</span>
                  <div className="hzdz-station-equipment-summary__special-value-container">
                    {item.hasBackground && <div className="hzdz-station-equipment-summary__special-value-bg"></div>}
                    <span className="hzdz-station-equipment-summary__special-value">{item.value}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});

StationEquipmentSummary.displayName = 'StationEquipmentSummary';

export default StationEquipmentSummary;